<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <p v-if="hasAddress!==true" style="line-height: 74px;text-align: center;font-size: 16px;color: #636363;" @click="addAddress">+填写收货地址</p>
      <flexbox :gutter="0" v-for="userAddList in userAddList" style="border-bottom: solid 1px #c1c1c1;margin-top: 8px" v-if="hasAddress===true">
        <flexbox-item :span="10"><div class="flex-demo">
          <span style="color: #000; font-size: 14px;">{{userAddList.name}}</span>
          <span style="font-size: 13px;color: #636363">{{userAddList.phone}}</span>
          <p @click="addressDetailFn(userAddList.id)" style="font-size: 11px;color: #636363;">{{userAddList.address}}</p>
          <div @click="setDefaultAdd(userAddList)">
            <!--<icon type="circle" v-if="userAddList.isDefault!==true"></icon>-->
            <!--<icon type="success" v-if="userAddList.isDefault===true" style="color: #FF9900;"></icon>-->
            <div style="display: inline-block;">
              <img style="vertical-align: middle;" slot="icon" v-if="userAddList.isDefault!==true" width="16" src="../../../assets/images/user/icon_xz.png">
              <img style="vertical-align: middle;" slot="icon" v-if="userAddList.isDefault===true" width="16" src="../../../assets/images/user/icon_gouxuan.png">
            </div>
            <div style="display: inline-block;">
              <span v-if="userAddList.isDefault!==true" style="vertical-align: middle;font-size: 13px;color: #a9a9a9">设为默认地址</span>
              <span v-if="userAddList.isDefault===true" style="color: #FF9900;vertical-align: middle;font-size: 13px;">默认地址</span>
            </div>
          </div>
        </div></flexbox-item>
        <flexbox-item @click.native="addressDetailFn(userAddList.id)"><div class="flex-demo">
          <p style="float:right;margin-right: 10px;">
            <cell is-link style="width: 0;"></cell>
          </p>
        </div></flexbox-item>
      </flexbox>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, Flexbox, FlexboxItem, Checklist, Checker, CheckerItem, Icon, Alert } from 'vux'
  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'
  import YqHeader from '../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      Checklist,
      Checker,
      CheckerItem,
      Icon,
      YqHeader,
      Alert
    },
    data () {
      return {
        isShowTabbar: false,
        isShowHeader: true,
        title: '收货地址管理',
        rightContent: '新增',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        show: false,
        message: '',
        hasAddress: false,
        userAddList: []
      }
    },
    methods: {
      onHide () {
        console.log('on hide')
      },
      onShow () {
        console.log('on show')
      },
      addAddress () {
        this.$router.push({
          path: '/address/AddAddress'
        })
        this.$router.go(1)
      },
      setDefaultAdd (getAdd) {
        let that = this
        that.userAddList.forEach(function (item) {
          if (item.id === getAdd.id) {
            that.http(urls.usersSetDefault, {id: getAdd.id}, function (res) {
              if (res.status === 100) {
                item.isDefault = true
              } else {
                that.show = true
                that.message = res.errMsg
              }
            }, function (res) {
              that.show = true
              that.message = res.errMsg
            })
          } else {
            item.isDefault = false
          }
        })
      },
      addressDetailFn (id) {
        this.$store.commit(types.USER_ADDRESS, {id: id})
        let params = {
          title: '修改地址',
          needRight: false,
          isShowTabbar: false
//          needBack: false,
//          needLeft: true,
//          leftContent: '取消'
        }
        this.$router.push({
          path: '/address/AddressDetail',
          query: {
            params: JSON.stringify(params)
          }
        })
        this.$router.go(1)
      },
      getAddList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userAddressList, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.userAddList = []
            if (res.data.list.length === 0) {
              that.hasAddress = false
              that.needRight = false
            } else {
              that.hasAddress = true
            }
            res.data.list.forEach(function (item) {
              let list = {
                id: item.id,
                name: item.linkName,
                phone: item.linkTel,
                address: item.pro + item.city + item.area + item.address,
                isDefault: item.isDefault
              }
              that.userAddList.push(list)
            })
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      rightCallback () {
        this.$router.push({
          path: '/address/AddAddress'
        })
        this.$router.go(1)
      },
      weixinfn8 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getAddList()
      this.weixinfn8()
    }
  }
</script>

<style scoped="scoped" lang='css'>
  .flex-demo {
    border-radius: 4px;
    background-clip: padding-box;
  }
  .flex-demo>p{
    font-size: 12px;
    color: #5d5d5d;
  }
  .flex-demo>span{
    display: inline-block;
    /*font-size: 18px;*/
    font-weight: bold;
  }
  .flex-demo>span:nth-child(2){
    float: right;
  }
  .flex-demo>span:nth-child(1){
    /*font-weight: bold;*/
  }
  .flex-demo>span:nth-child(1), .flex-demo>p, .flex-demo>div{
    margin-left: 15px;
  }
</style>
